<template>
<div class="nav-header">
  <div class="menu-icon" @click="handleMenuIconClick">
    <el-icon>
    <component :is="isFold?'Expand':'Fold'"></component>
    </el-icon>
  </div>
  <div class="content">
  <div class="breadcrumb"><header-crumb/></div>
 <Header/>

</div>
</div>
</template>

<script setup lang="ts">
import {ref ,defineEmits} from "vue";
import Header from "@/components/header.vue"
import HeaderCrumb from "@/components/header-crumb.vue"
let  isFold=ref(false)
const emit =defineEmits(["foldChange"])
function handleMenuIconClick(){
  isFold.value =!isFold.value
  emit("foldChange",isFold.value)
}
</script>

<style scoped>
.nav-header {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;

}
.menu-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 0 18px;
}
</style>
